<template>
	<div class="common-layout">
		<el-container>
									    			
			<el-aside :width="isCollapse ? '60px' : '200px'">
				
				<div >
				<el-icon >
				    <img src="../images/tubiao.png" width="55px" height="55px"
				        style="margin-left: 50px;background-color: #fff;border-radius: 50%;margin-top: 35px;">
				</el-icon>
				<div style="margin-left: 70px;margin-top: -40px;font-size: 25px;">家装系统</div>
			</div>
				<el-menu default-active="1" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
					@close="handleClose" router>


					<el-sub-menu v-for="item in myMenus" :index="item.MenuName">
						<!-- :index="item.MenuUrl==''?item.Id.toString():item.MenuUrl" -->
						<!-- :index="item.MenuName" -->
						<template #title>
							<el-icon>
								<component :is="item.MenuIcon"></component>
							</el-icon>
							<span>{{ item.MenuName }}</span>
						</template>
						<el-menu-item v-for="sub in item.Children" :index="sub.MenuUrl">
							<el-icon >
								<component :is="sub.MenuIcon"></component>
							</el-icon>{{ sub.MenuName }}
						</el-menu-item>
					</el-sub-menu>

					<!-- <el-menu-item index="/charts">
						<el-icon>
							<setting />
						</el-icon>
						<template #title>统计图</template>
					</el-menu-item> -->
				</el-menu>
			</el-aside>
			<el-container>
				<el-header>
					<el-container style="display: flex; justify-content: space-between; align-items: center;">
						<!-- 左侧内容 -->
						<div >
							<label style="font-weight: 900;">欢迎来到家装系统</label>
						</div>

						<!-- 右侧内容 -->
						<div>
							<el-dropdown @command="handleCommand">
								<el-avatar :src="touxiang.ProfilePhoto" size="40" style="cursor: pointer;">
								</el-avatar>
								<template #dropdown>
									<el-dropdown-menu>
										<el-dropdown-item command="profile">个人资料</el-dropdown-item>
										<el-dropdown-item command="settings">设置</el-dropdown-item>
										<el-dropdown-item command="logout">退出登录</el-dropdown-item>

									</el-dropdown-menu>
								</template>
							</el-dropdown>

						</div>
					</el-container>
				</el-header>
				<el-main>
					<RouterView></RouterView>
				</el-main>
				<el-footer><!-- Footer --></el-footer>
			</el-container>
		</el-container>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { ElDropdown, ElDropdownMenu, ElDropdownItem, ElAvatar } from 'element-plus'
const components = [ElDropdown, ElDropdownMenu, ElDropdownItem, ElAvatar];
import 'element-plus/dist/index.css';
import { Share, Switch, Avatar, User } from '@element-plus/icons-vue'
import {
	Document,
	Menu as IconMenu,
	Location,
	Setting,
} from '@element-plus/icons-vue'
import { useMainStore } from "../stores/index"
import menuapi from '../api/menuapi'
import router from '@/router';

const myMenus = ref([])
var touxiang = useMainStore();
const isCollapse = ref(false)
const handleOpen = (key: string, keyPath: string[]) => {
	console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
	console.log(key, keyPath)
}

const handerCollapse = () => {
	isCollapse.value = !isCollapse.value;
}


const getMenus = () => {
	menuapi.UserMenus().then(res => {
		console.log("myMenus=", res)
		myMenus.value = res.data
	}).catch(err => {
	})
}

onMounted(() => {
	getMenus();
})
const handleCommand = (command: any) => {

	switch (command) {
		case 'profile':
			alert("这个按钮没用")
			break;
		case 'settings':
			alert("这个按钮没用")
			break;
		case 'logout':
			sessionStorage.clear();
			router.push('/Login')
			break;
	}
}
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: 200px;
	min-height: 400px;
}

.el-header {
	height: 45px;
	border: 1px solid #ddd;
	padding-top: 4px;
	/* margin-bottom: 10px; */
}

.el-main {
	margin-top: 10px
}
</style>